<template>
  <div class="w-screen h-screen flex justify-center items-center bg-gray-100">
    <div class="bg-white p-4 rounded-lg shadow-md w-80">
      <h1 class="text-lg font-bold mb-4 text-center">登录</h1>
      <Form @submit="handleLogin">
        <input v-model="form.username" label="用户名" placeholder="请输入用户名"
          :rules="[{ required: true, message: '用户名不能为空' }]" />
        <input v-model="form.password" label="密码" type="password" placeholder="请输入密码"
          :rules="[{ required: true, message: '密码不能为空' }]" />
        <div class="form-actions">
          <Button type="primary" html-type="submit">登录</Button>
        </div>
      </Form>
      <p class="mt-4 text-center">
        还没有账号？
        <router-link to="/register" class="text-blue-500 hover:underline">注册</router-link>
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Form, Button } from '@kousum/semi-ui-vue'
import services from '@/services'
import type { LoginForm } from '@/services/account/account.types'

const router = useRouter()
const form = ref<LoginForm>({
  username: '',
  password: '',
})

const handleLogin = async () => {
  try {
    console.log(form.value)
    await services.account.login(form.value)
    router.push('/') // 登录成功后跳转到首页
  } catch (error) {
    console.error('登录失败:', error)
    alert('登录失败，请检查用户名和密码')
  }
}
</script>
